import React, { useState } from "react";
import { Outlet, NavLink, useNavigate } from "react-router-dom";
import { homeRoutes } from "../../router/RouterConfig";
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Breadcrumb, Layout, Menu, theme } from "antd";
import { RouterItem } from "../../utils/type";

const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>["items"][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[]
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

// const items: MenuItem[] = [
//   getItem('Option 1', '1', <PieChartOutlined />),
//   getItem('Option 2', '2', <DesktopOutlined />),
//   getItem('User', 'sub1', <UserOutlined />, [
//     getItem('Tom', '3'),
//     getItem('Bill', '4'),
//     getItem('Alex', '5'),
//   ]),
//   getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
//   getItem('Files', '9', <FileOutlined />),
// ];

const App: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();
  // const renderHomes=(homeRoutes:RouterItem[])=>{
  //     let items:MenuItem[]=[]
  //     homeRoutes && homeRoutes.forEach((item:RouterItem,index)=>{
  //         if(item.children){
  //             items.push(getItem(item.title,item.path,<item.icon/>,renderHomes(item.children as RouterItem[])))
  //         }else{
  //             items.push(getItem(<NavLink to={item.path}>{item.title}</NavLink>,item.path,<item.icon/>))
  //         }
  //     })
  //     return items
  // }
  const renderHomes = (homeRoutes: RouterItem[]) => {
    let items: MenuItem[] = [];
    homeRoutes &&
      homeRoutes.forEach((item: RouterItem, index) => {
        if (item.children) {
          items.push(
            getItem(
              item.title,
              item.path,
              <item.icon />,
              renderHomes(item.children as RouterItem[])
            )
          );
          } else {
            items.push(
              getItem(
              <NavLink to={item.path}>{item.title}</NavLink>,
              item.path,
              <item.icon />
            )
          );
        }
      });
    return items;
  };
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const exit = () => {
    localStorage.removeItem("token");
    localStorage.removeItem("user");
    localStorage.removeItem("role");
    navigate("/login");
  };
  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          defaultSelectedKeys={["1"]}
          mode="inline"
          items={renderHomes(homeRoutes)}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>
          欢迎....
          {localStorage.getItem("token") ? (
            <span>
              用户名：{localStorage.getItem("user")}, 身份：
              {localStorage.getItem("role")}
            </span>
          ) : (
            <NavLink to="/login">未登录</NavLink>
            )}
          <button onClick={exit}>退出</button>
        </Header>
        <Content style={{ margin: "0 16px" }}>
          <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>2
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet></Outlet>
        ·  </div>
        </Content>
        <Footer style={{ textAlign: "center" }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );  
};
export default App;